<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>js_test</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" type="text/javascript"></script>
    <script src="./js/main.js" type="text/javascript"></script>
    <style>
        .hello {
            color: red;
        }
    </style>
</head>
<body>
<div>
    <p>===== js test ====</p>
    <p>
    <form action="javascript:void(0);" id="myForm">
        <input type="text" value="11" id="userId" class="aaa" name="myId" />
        <input type="text" value="sun" id="userName" name="userName" />
        <input type="date" id="createDate" name="createDate" />
        <input type="button" value="提交" id="mySubmit"/>
    </form>
    </p>
    <p>
    <div id="myDiv">
        <h1>Test</h1>
    </div>
    <span id="ddd" class="hello">asdfgh</span>
    <a href="javascript:void(0);">asdfgh</a>
    </p>
    <p>
        <input type="radio" value="man" id="manRadio" name="sex" />man
        <input type="radio" id="womanRadio" value="woman" name="sex" />woman
    </p>
    <p>
        <input type="button" name="qq" value="jsBaseTest1" id="jsBase1" />
        <input type="button" name="bb" value="jsBaseTest2" id="jsBase2" />
        <input type="button" name="bbcc" value="jsBaseTest3" id="jsBase3" />
        <input type="button" name="aaa" value="jsBaseTest4" id="jsBase4" />
        <input type="button" name="aaa" value="jsBaseTest5" id="jsBase5" onclick="jsBaseTest5()" />
        <input type="button" name="aaa" value="jsBaseTest6" id="jsBase6" />
    </p>
</div>
<script>
    $(function () {
        $("#jsBase1").bind("click", function () {
            jsBaseTest1();
        });
        $("#jsBase2").bind("click", function () {
            jsBaseTest2();
        });
        $("#jsBase3").bind("click", function () {
            jsBaseTest3();
        });
        $("#jsBase4").bind("click", function () {
            jsBaseTest4();
        });
        $("#mySubmit").bind("click", function () {
            submitForm();
        });
        $("#jsBase6").click(function () {
            window.location.reload();
        });

    });

    var version = "1.0";

    function submitForm() {
        console.log($("#myForm").serialize());
        var user = {};
        user.userId = $("#userId").val();
        user.userName = $("#userName").val();
        user.createDate= $("#createDate").val();
        console.log(JSON.stringify(user));
    }

    function jsBaseTest5() {
        // 数据处理
        console.log("asdfgh");
    }

    function jsBaseTest4() {
        // 数据处理
        var list = ["admin", "manager", "staff"];
        // list.forEach(function (item) {
        // 	console.log(item);
        // });
        $.each(list, function (i, item) {
            console.log(i + "-" + item);
        });

        // 事件处理
    }

    function jsBaseTest3() {
        console.log("==== $ ====");
        console.log(window.jQuery);
        console.log(window.$);
        console.log(window.jQuery === window.$);

        console.log("==== 选择器 ====");
        // document.getElementById("userId").value
        var userId = $("#userId");
        console.log(userId.val());
        var inputs = $("input");
        console.log(inputs.length);
        var myInput = $(".aaa");
        console.log(myInput.val());
        var bbbs = $("[name$=z]");
        console.log(bbbs.length);
        var ccc = $("input[name=cbb]");
        console.log(ccc.length);
        console.log($("p, span").length);
        console.log($("div p").length);
        console.log($("input:first-child").length);
        console.log("========");

        console.log("==== dom 操作 ====");
        console.log($("#ddd").text());
        console.log($("#ddd").html());

        $("#ddd").html("hello world");
        // $("#ddd").css("color", "blue");
        // $("#ddd").addClass("hello");
        $("#ddd").removeClass("hello");
        $("#ddd").hide(); // show()

        // console.log($("#userId").attr("name", "yourId"));
        $("#userId").removeAttr("name");
        console.log($("#userId").attr("name"));
        console.log($("#manRadio").attr("checked"));
        console.log($("#manRadio").prop("checked"));
        console.log($("#manRadio").is(":checked"));
        console.log($(document).width());

        // 表单的操作
        console.log($("[name=sex]:checked").val());
        $("#userId").val(456);
        console.log($("#userId").val());

        // 结构操作
        $("#myDiv").prepend("<h2>Test3</h2>");
        $("#myDiv").append("<h2>Test2</h2>");
        $("#myDiv").remove();
    }

    function jsBaseTest2() {
        console.log("==== 高阶函数 ====");
        var array = [11, 44, 22, 33, 66, 55];
        array.forEach((item) => console.log(item));
        console.log(array.map((item) => item + 3));
        console.log(array.reduce((a, b) => a + b));
        console.log(array.filter((item) => item % 2 == 0));
        console.log(array.sort((a, b) => a - b));

        console.log("==== Date ====");
        var date = new Date();
        console.log(date);
        console.log(date.toLocaleDateString());
        console.log(date.getDate());

        console.log("==== RegExp ====");
        var re1 = /^[1-9]\d*$/;
        var re2 = new RegExp(re1);
        console.log(re1.test("asdfgh"));
        console.log("a c  c d".split(/\s+/));
        var line =
            "全省累计报告新型冠状病毒肺炎确诊病例1332例（其中境外输入741例），累计治愈出院1295例，死亡3例，目前在院隔离治疗34例，403人尚在接受医学观察";
        var re3 =
            /^全省累计报告新型冠状病毒肺炎确诊病例(\d+)例（其中境外输入(\d+)例），累计治愈出院(\d+)例，死亡(\d+)例，目前在院隔离治疗(\d+)例，(\d+)人尚在接受医学观察$/;
        console.log(re3.exec(line));

        console.log("==== Json ====");
        var personString = '{"name":"sun", "age":21}';
        var person = {
            name: "smk",
            age: 21,
        };
        console.log(person);
        console.log(JSON.stringify(person));
        console.log(JSON.parse(personString));
        console.log(eval("(" + personString + ")"));

        console.log("==== 浏览器对象 ====");
        console.log(window.innerWidth + "-" + window.innerHeight);
        console.log(navigator.appName);
        console.log(location.href);
        console.log(document.getElementById("userId").value);
    }

    function jsBaseTest1() {
        console.log("==== 字符串 ====");
        var name = "sun";
        var age = 21;
        console.log(`${name} 今年 ${age}`);
        var hello = "Hello World!";
        console.log(hello.length);
        console.log(hello[1]);
        console.log(hello.toUpperCase());
        console.log(hello.indexOf("l"));
        console.log(hello.substring(0, 4));

        console.log("==== 数组 ====");
        var arr1 = [1, 22.22, "hello", null, true];
        console.log(arr1);
        var arr2 = new Array(321, 432, null);
        console.log(arr2);
        console.log(arr2.length);
        console.log(arr2[0]);
        arr2[0] = "sun";
        console.log(arr2[0]);
        console.log(arr2.indexOf(432));
        console.log(arr2.slice(0, 1));
        arr2.push("nihao");
        console.log(arr2);
        console.log(arr2.sort());
        console.log(arr1.concat(arr2));
        console.log(arr1.join("-"));

        console.log("==== 对象 ====");
        var student = {
            name: "sun",
            age: 21,
            roles: ["admin", "staff"],
            hasCar: false,
            zipcode: null,
            study: function () {
                // 函数体
            },
        };
        console.log(student.hasOwnProperty("age"));
        console.log(student);
        console.log(student.name);
        student.age = 19;
        console.log(student.age);
        delete student.zipcode;
        console.log(student);

        console.log("==== Map ====");
        var map = new Map();
        map.set("name", "sun");
        map.set("age", 21);
        map.set("sex", "female");
        console.log(map);
        console.log(map.get("age"));
        map.delete("sex");
        console.log(map);

        console.log("==== Set ====");
        var set = new Set();
        set.add(1);
        set.add(1);
        set.add(2);
        set.add(3);
        console.log(set);

        console.log("==== 条件判断 ====");
        var age = 44;
        if (age < 18) {
            console.log("儿童、少年");
        } else if (age >= 18 && age < 40) {
            console.log("青壮年");
        } else if (age >= 40) {
            console.log("中老年");
        }

        console.log("==== 循环 ====");
        for (var i = 0; i < arr1.length; i++) {
            console.log(arr1[i]);
        }
        for (var item in arr1) {
            console.log(item);
            console.log(arr1[item]);
        }
        for (var key in student) {
            console.log(key);
        }
        console.log(Object.keys(student));
        console.log(Object.values(student));

        var start = 0;
        var end = 10;
        while (start < end) {
            console.log(start);
            start++;
        }
        do {
            console.log(start);
            start++;
        } while (start < end);
        for (var item of arr1) {
            console.log(item);
        }
        for (var item of map) {
            console.log(item);
        }
        for (var item of set) {
            console.log(item);
        }
        arr1.forEach(function (item) {
            console.log(item);
        });
        map.forEach(function (value, key, map) {
            console.log(key + "--" + value + "--" + map);
        });
        set.forEach(function (item, element, set) {
            console.log(item + "--" + element + "--" + set);
        });

        console.log("==== 变量 ====");
        console.log(version);
        console.log(window.version);
    }
</script>
</body>
</html>
